<template>
  <!-- 5身份抗识别 -->
  <div class="tc">
    <div class="bg">
      <div class="title">用户信息</div>
      <div class="body">
        <div class="unit-info">
          <span>用户：</span>
          <span class="right-align">{{ initData1.name }}</span>
        </div>
        <div class="unit-info">
          <span>用户单位：</span>
          <span class="right-align">{{ initData1.unit }}</span>
        </div>
        <div class="unit-info">
          <span style="color: #ffb302">①微博信息：</span>
        </div>

        <div class="unit-info">
          <span>用户昵称：</span>
          <span class="right-align">{{ initData.userFromName }}</span>
        </div>
        <div class="unit-info">
          <span style="color: #2aed07">②知乎信息</span>
        </div>
        <div class="unit-info">
          <span>用户昵称：</span>
          <span class="right-align">{{ initData.userToName }}</span>
        </div>
        <div class="unit-info">
          <span>风险信息</span>
          <span class="right-align redtext">{{ initData.userToGroup }}</span>
        </div>
        <div style="padding: 10px">
          <el-button class="bt1" @click="dialogVisible = true">
            抗身份识别
          </el-button>
        </div>
      </div>
    </div>
    <!-- 弹窗-->
    <el-dialog
      class="maindialog"
      title="干扰任务配置"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      z-index="1000"
    >
      <el-descriptions title="用户信息" :column="2">
        <el-descriptions-item label="用户名称">
          {{ initData.userFromName }}
        </el-descriptions-item>
        <el-descriptions-item label="ID">
          {{ initData.userFromId }}
        </el-descriptions-item>
        <el-descriptions-item label="昵称">
          {{ initData.userFromName }}
        </el-descriptions-item>
        <el-descriptions-item label="平台">
          {{ initData.userFromPlate }}
        </el-descriptions-item>
      </el-descriptions>

      <div>
        <h3>抗识别方式</h3>
        <el-radio v-model="radio" label="1"> 虚拟社交关系构建 </el-radio>
        <el-radio v-model="radio" label="2"> 虚拟用户布设 </el-radio>
        <el-radio v-model="radio" label="3"> 虚拟用户混淆策略 </el-radio>
        <div>
          <span style="font-size: 14px" v-if="radio==1">通过在与目标用户结构相似的用户上添加虚拟的社交关系，使目标用户与相似用户混淆，从而干扰身份识别算法的准确性。</span>
          <span style="font-size: 14px" v-if="radio==2">通过创建虚拟用户节点，并镜像目标用户的社交关系，将这些虚拟用户作为迷惑点注入社交网络，以混淆真实身份，干扰跨平台用户对齐算法。</span>
          <span style="font-size: 14px" v-if="radio==3">以社区模块度 Q 为优化目标，用二进制粒子群优化算法寻找使得模块度 Q 最小的虚拟用户连接策略，以干扰目标用户社区识别。</span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="showDetails">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      class="maindialog"
      :visible.sync="dialogDetails"
      width="30%"
      z-index="1000"
    >
      <template #title>
        <div
          style="
            font-weight: bold;
            font-size: 20px;
            color: #fff;
            text-align: center;
          "
        >
          新建用户抗身份识别任务
        </div>
      </template>
      <span class="dialogDetailstext"
        >新建用户抗身份识别任务完成，任务执行需要一段时间，完成后将在消息框进行提示。</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogDetails = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { antiRecognition } from "@/api/combat/taskManagement";
export default {
  data() {
    return {
      initData: {},
      initData1: {
        name: '',
        unit: ''
      },
      radio: "1",
      dialogVisible: false,
      dialogDetails: false,
    };
  },
  methods: {
    initDataFn(item) {
      this.initData = item;
      console.log(this.initData);
    },
    initDataFn1(item,item2) {
      this.initData1.name = item;
      this.initData1.unit = item2;
      console.log(this.initData1);
    },
    showDetails() {
      console.log(this.initData);
      let obj = {
        warnId: this.initData.id,
        methodId: this.radio,
      };
      antiRecognition(obj).then((res) => {
        if (res.code == 200) {
          this.dialogVisible = false;
          this.dialogDetails = true;
        }
      });
    },
    handleClose() {},
  },
};
</script>

<style lang="scss" scoped>
.bt1 {
  font-size: 14px;
  width: 120px;
  background: linear-gradient(270deg, #2db2fd 0%, #0e5fff 100%);
  border-radius: 4px;
  border: none;
  color: #fff;
  text-align: center;
  position: relative;
  top: 15px;
  left: 15px;
  padding: 8px 15px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.bt1:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.tc {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 300px;
  height: 320px;
  z-index: 10000;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.bg {
  padding: 15px;
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/xd/dialogbg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 10000;
  border-radius: 8px;
}

.title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 20px;
  color: #ffffff;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 15px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.unit-info {
  display: flex;
  position: relative;
  top: 15px;
  justify-content: space-between;
  align-items: center;
  padding: 2px 4px;
  color: #90cee9;
  font-size: 14px;
  margin-bottom: 4px;
  transition: all 0.3s ease;
}

.unit-info:hover {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.right-align {
  margin-left: auto;
  color: #fff;
  font-weight: 500;
}

.redtext {
  color: #ff4d4f;
  font-weight: 600;
}

.el-descriptions-item {
  font-size: 16px;
}

.dialogDetailstext {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  line-height: 1.6;
}
</style>